<template>
  <div class="my-header-container q-pa-md q-gutter-sm">
    <q-bar class="bg-primary">
      <q-btn flat round icon="menu" @click="leftDrawer = !leftDrawer"/>
      <div>当前项目：{{project.cname}}</div>
      <q-space />
      <q-btn dense flat icon="close" @click="onLoginOut" />
    </q-bar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import MenuItem from 'components/common/MenuItem.vue';
import { useCommonStore } from 'src/stores/commonStore';
import { useEditorStore } from 'stores/editorStore';
import { socket } from 'src/socket/websocket';


export default defineComponent({
  name: 'HmiHeader',
  components: {
    MenuItem
  },
  setup (props, context) {
    //*********************************************************
    // 路由、store
    //*********************************************************
    const curRouter = useRouter();

    //*********************************************************
    // store
    //*********************************************************
    //editorStore
    const store = useEditorStore();
    const {
      project
    } = storeToRefs(store);

    //commonStore
    const commonStore = useCommonStore();
    const {
      leftDrawer
    } = storeToRefs(commonStore);

    //关闭websocket
    const closeWebsocket = () => {
      socket.close();
    }

    //预览，打开新的页面
    const onLoginOut = () => {
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('user');
      commonStore.initMenus();
      commonStore.initUser();
      commonStore.initToken();
      commonStore.setConfirm(0);

      //断开websocket连接
      closeWebsocket();

      //跳转到home
      curRouter.push('/auth/login');
    }

    return {
      leftDrawer,
      project,
      onLoginOut
    };
  }
});

</script>

<style lang="scss" scoped>
.my-header-container {
  margin: 0;
  padding: 0;
  height: 50px;
}


</style>
